Приветствую Вас на страницах нашего сайта, в данной статье пойдет речь о том, как придать привлекательный вешний вид комментариям на сайте. В качестве образца я решил взять один из лучших компонентов комментариев для Joomla 3 под названием JComments.
Прежде чем приступить к оформлению, необходимо скачать, установить и настроить данный компонент (для тех, кто не знает, как это сделать прочитайте данную статью).
А теперь давайте посмотрим на стандартную форму добавления комментария на сайт:
Вроде бы все в порядке, но все же есть некоторые недочеты, которые следует исправить.
Оформление формы ввода комментариев
Оформление комментариев начнем, пожалуй, с самого главного – области ввода текста. Для начала изменим размеры, а затем цвет.
Изменение размера – увеличиваем область ввода текста
Первое что бросается в глаза глядя на стандартное оформление это слишком маленькая область для ввода комментариев, возможно, это кому то нравится, но я считаю это недостатком и буду его исправлять. Я решил сделать текстовое поле для ввода комментария более широким, мне кажется, что если его ширина будет равна (или чуть меньше) области контента, то будет гораздо лучше. Кроме того уберем лишние отступы, которые на мой взгляд так же не нужны.
Если взглянуть на код страницы, то можно заметить, что вся форма добавления комментариев заключена в теге <form> с идентификатором comments-form:
<form id="comments-form" name="comments-form" action="javascript:void(null);"> … </form>
Внутри формы расположены обычные параграфы (тег <p>) и в одном из таких параграфов находится интересующее нас текстовое поле:
<textarea id="comments-form-comment" name="comment" cols="65" rows="8" tabindex="5"></textarea>
На мой взгляд, такой подход построения формы добавления комментариев не совсем удобен, можно конечно переопределить стандартный шаблон компонента и перестроить все по своему усмотрению, но нам сейчас это не нужно.
Все изменения в дизайн компонента комментариев я буду вносить в отдельный файл стилей, который был предварительно создан и подключен к шаблону (как это сделать, можно прочитать в данной статье).
Итак, начнем работу с тем, что есть. Сначала убираем все отступы у параграфов, они реально не нужны:
form#comments-form p {margin: 0 !important;}/*убираем отступы*/
А теперь увеличим ширину области ввода текста. Тут не все так просто, не понятно чем руководствовались разработчики компонента, когда писали стили оформления, но они дважды ограничили ширину этой самой области текста. По их задумке ширина должна составлять 350 пикселей, а максимальная ширина 400, но и этого им показалось мало, они присвоили максимальной ширине высокий приоритет:
max-width: 400px !important; width: 350px;
Можно конечно подправить данный недочет в файле стилей компонента, но раз уж я все пишу в отдельный файл, чтоб не потерять изменения при обновлении шаблона (либо компонента JComments), то в него и буду записывать. В итоге для того чтобы поменять ширину области ввода я написал следующие стили:
textarea#comments-form-comment {
max-width: 98% !important;
width: 98%;
}
Теперь необходимо придать точно такую же ширину полоске со счетчиком количества символов, которая расположена чуть ниже области ввода. С ней та же беда – двойное ограничение ширины. Объединим стили области ввода и полоски со счетчиком, в результате получим следующий код:
textarea#comments-form-comment, #comments-form > p > span > div.grippie {
max-width: 98% !important;
width: 98%;
}
В результате проделанной работы мы убрали лишние отступы и увеличили ширину текстового поля:
Цвет и оформление
Цвета области ввода изначально были совершенно обычные - серые скучные рамки, невзрачная тень и желтая подсветка активной области ввода. Такое оформление впишется далеко не в каждый дизайн, поэтому стоит это исправить.
Не буду описывать каждый шаг по отдельности, кратко скажу, что я сделал, предоставлю стили и конечный результат. А сделал я вот что - убрал тень и желтую подсветку активных текстовых полей, вместо этого добавил им более толстую рамку сверху и снизу. Изменил цвета рамки и фон области со счетчиком количества символов, изменил цвет текста этого же счетчика и добавил внутренние отступы, чтобы текст не налегал на края рамок. Кроме того сделал края текстовых полей скругленными:
Согласитесь такое оформление гораздо лучше стандартного, а вот собственно и необходимые стили:
#comments-form input, #comments-report-form input, #comments-form textarea, #comments-form-captcha-image {/*текстовые поля*/
border: 1px solid rgba(252, 143, 48, 0.4) !important; /*рамка*/
padding: 3px !important; /*отступ*/
}
#comments-form input.selected, #comments-report-form input.selected, #comments-form textarea.selected {/*Активные текстовые поля*/
background-color: transparent !important; /*фон*/
border-top: 3px solid #FD8E32 !important; /*рамка сверху*/
border-bottom: 3px solid #FD8E32 !important; /*рамка снизу*/
box-shadow: none !important; /*убираем тень*/
}
#comments-form input, #comments-report-form input, #comments-form-captcha-image {
border-radius: 7px;/*Закругленные края текстовых полей*/
}
#comments-form textarea { /*Закругленная рамка области ввода*/
border-radius: 7px 7px 0 0; /*только сверху*/
}
#comments-form > p > span > div.grippie {/*Область со счетчиком*/
background-color: #FD8E32 !important; /*фон*/
padding: 0 3px !important; /*отступ*/
}
span.counter, span.counter > span {/*цвет текста счетчика символов*/
color: #fff !important; /*цвет*/
margin-left: 5px !important;/*отступы*/
}
Оформление кнопки «Отправить»
Теперь давайте займемся кнопкой «Отправить», ведь её оформление далеко от совершенства. Вариантов как исправить её стандартный вид много, если переопределять все примененный к ней стили, то CSS файл получится достаточно емким.
Блок <div>, который является по совместительству контейнером для кнопки «Отправить» имеет класс btn:
<div class="btn" id="comments-form-send">
Те, кто знаком с Bootstrap уже знают, что элементы с данным классом оформлены соответствующе. Поэтому чтобы не переписывать все стили я решил просто избавиться от данного класса, для этого пришлось несколько подкорректировать шаблон компонента JComments.
За отображение формы добавления комментариев отвечает файл tpl_form.php, который можно найти в папке имя_сайта/ components/com_jcomments/tpl/default. Открываем данный файл и пролистываем его до 150 строки, там мы видим следующий код:
<div class="btn" id="comments-form-send"><div><a href="#" tabindex="7" onclick="jcomments.saveComment();return false;" title="<?php echo JText::_('FORM_SEND_HINT'); ?>"><?php echo JText::_('FORM_SEND'); ?></a></div></div>
Именно этот код отвечает за отображение и функционал нужной нам кнопки. Удаляем тот самый класс (class="btn") от которого мы решили избавиться, а ссылке (тег <a>) присвоим класс «.com-send». Кроме того избавимся от лишнего вложенного блока DIV, если честно я не вижу от него никакого смысла. В результате должен получиться следующий код:
<div id="comments-form-send"><a href="#" tabindex="7" onclick="jcomments.saveComment();return false;" title="<?php echo JText::_('FORM_SEND_HINT'); ?>" class="com-send"><?php echo JText::_('FORM_SEND'); ?></a></div>
В результате этих действий вместо старой кнопки у нас появилась обычная ссылка с текстом «Отправить», а теперь осталось оформить её по своему усмотрению. Первое что я сделал, это убрал наружные отступы у блока-контейнера кнопки:
div#comments-form-buttons {/*убираем лишние отступы*/
margin: 0 !important;
padding: 0 20px 5px 0 !important;
}
Теперь можно заняться самим оформлением кнопки, с ней пришлось немного повозиться, не буду вдаваться в подробности, а лучше сразу напишу использованные мной стили:
/*Комментарии - кнопка "Отправить"*/
div#comments-form-buttons {/*убираем лишние отступы*/
margin: 0 !important;
padding: 0 20px 5px 0 !important;
}
a.com-send {
position: relative;
color: #fff!important;
float: right;
font-weight: bold;
text-decoration: none;
user-select: none;
padding: 5px 10px;
outline: none;
background-color: #fd8e32;
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8),
rgba(255,255,255,.0) 70%), radial-gradient(190% 100% at 50% 0%, rgba(255,255,255,.7) 0%,
rgba(255,255,255,.5) 50%, rgba(0,0,0,0) 50%);
background-repeat: no-repeat;
background-size: 200% 100%, auto;
background-position: 200% 0, 0 0;
border-radius: 8px;
box-shadow: rgba(0,0,0,.3) 0 2px 5px;
font-family: lobster;
font-size: 17px;
}
a.com-send:hover {/*При наведение на кнопку*/
transition: .5s linear;
background-position: -200% 0, 0 0;
}
a.com-send:active {/*При щелчке по кнопке*/
top: 1px;
box-shadow: none;
}
Сохраняем стили и смотрим на результат проделанной работы:
Оформление списка комментариев
Форму отредактировали, теперь давайте несколько изменим оформление самих комментариев на сайте. Если честно, то тут все гораздо лучше оформлено, и особо придраться не к чему:
Но кое-что я бы все-таки подправил, например можно отделить автора комментария и дату публикации от основного текста комментария, изменить размер шрифта и оформление цитаты. Для этих целей я написал следующие стили:
.comment-body {/*шрифт, выравнивание, отступы и рамка комментария*/
border-top: 1px solid #ccc;
margin-top: 2px !important;
padding-top: 5px !important;
font-size: 14px;
line-height: 16px;
text-align: justify !important;
}
.comment-body blockquote {/*цитата*/
border: 2px dashed #849B9F !important;
font-family: 'Lobster', cursive;
color: #827f7f !important;
position: relative;
}
.comment-body blockquote:after {/*цитата*/
content: "\201D";
font-size: 60px;
line-height: 25px;
position: absolute;
right: 10px;
bottom: -10px;
}
span.quote {/*Автор цитаты*/
border: 2px dashed #849B9F;
border-bottom: none;
border-radius: 10px 10px 0 0;
margin-bottom: -2px !important;
padding: 5px;
float: left;
background-color: rgb(242, 242, 242);
font-weight: bold;
font-size: 12px !important;
color: #000 !important;
}
span.quote:before {/*Автор цитаты (ковычка)*/
content: "\201C";
font-size: 30px;
}
Стилей на первый взгляд много, но большинство из них нужны для оформления кавычек внутри цитаты, все остальное это обычное оформление шрифта. Результат проделанной работы получился вот таким:
Проверка адаптивности компонента комментариев
С оформлением закончили, осталось проверить, как будут смотреться комментарии и форма их добавления на мобильных устройствах. В принципе все хорошо, но вот смайлики, они как будто насмехались надо мной (в подтверждение тому скриншот ниже) – получились растянутыми во всю ширину окна и смотрелись отвратительно.
Дело в том, что я специально растягивал изображения на всю ширину области контента, а так как эти смайлики и есть изображения, то они соответственно так же растянулись. Исправить это можно всего одним свойством:
#comments-form p span div.smiles img, div.comment-box .comment-body img {width: auto !important;}/*ширина смайликов*/
Вот и все, в результате все смайлики отображаются корректно:
Других проблем с адаптивным дизайном замечено не было, все выглядит корректно.
Убираем копирайт (ссылку на сайт разработчиков) в компоненте JComments
Ну и напоследок хочу показать, как убрать ссылку на сайт разработчиков, другими словами копирайт в нижней части компонента JComments:
Избавиться от этой ссылки можно двумя способами:
- Скрыть её от посетителей
- Удалить физически
- Заменить собственной надписью
В первом случае ссылка никуда не денется, её просто не будет видно, зато Вы не нарушите авторские права, а Ваш сайт будет ссылать на страницу разработчиков на веки вечные. Самый простой способ скрыть ссылку это сделать её цвет прозрачным:
div#comments-footer a {color: transparent !important; }
Во втором случае ссылка будет удалена напрочь, но тут придется править файлы шаблона компонента. Дело это не хитрое и займет не больше минуты Вашего времени, зато в конечном результате на Вашем сайте на одну лишнюю не закрытую ссылку на сторонние сайты станет меньше.
Что для этого потребуется, для начала открыть файл tpl_index.php, который расположен в папке ваш_сайт/ components/com_jcomments/tpl/default и обратить внимание на строку кода под номером 77. Там вы увидите следующий код:
<div id="comments-footer" align="center"><?php echo $this->getVar('support'); ?></div>
Для удаления ссылки просто удаляем PHP код, который расположен между тегами DIV. Или можно полностью удалить всю строку, отвечающую за вывод футера, по мне так даже лучше.
Ну и последний вариант – заменить ссылку (копирайт) собственной надписью либо ссылкой. В этом случае просто замените вышеуказанный PHP код собственным текстом. Но так как данный текст будет выводиться на каждой странице его лучше заключить поместить между тегами <noindex></noindex>:
<div id="comments-footer" align="center"><noindex>Ваш текст вместо копирайта.</noindex></div>
Сохраняем результат и наслаждаемся проделанной работой, но хочу обратить внимание, после обновления компонента, будьте готовы к тому, что все внесенные изменения в стандартные файлы будут потеряны.
